<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>  🎉</title>
    <style>
        /* 基础可爱风格 */
        body {
            margin: 0;
            padding: 20px;
            font-family: 'Comic Sans MS', cursive;
            background: #ffe6f2;
            min-height: 100vh;
            transition: all 0.5s;
        }

        /* 输入容器 */
        .container {
            max-width: 500px;
            margin: 20vh auto;
            text-align: center;
            animation: bounceIn 1s;
        }

        /* 输入框样式 */
        input {
            display: block;
            width: 80%;
            margin: 20px auto;
            padding: 15px;
            border: 3px solid #ff99cc;
            border-radius: 25px;
            font-size: 18px;
            background: #fff;
            transition: transform 0.3s;
        }

        input:focus {
            transform: scale(1.05);
            outline: none;
        }

        /* 按钮样式 */
        button {
            background: #ff66b2;
            color: white;
            padding: 15px 40px;
            border: none;
            border-radius: 30px;
            font-size: 20px;
            cursor: pointer;
            box-shadow: 0 5px 15px rgba(255,102,178,0.3);
            transition: all 0.3s;
        }

        button:hover {
            transform: scale(1.1);
            box-shadow: 0 8px 20px rgba(255,102,178,0.5);
        }

        /* 动画效果 */
        @keyframes bounceIn {
            0% { transform: scale(0.5); opacity: 0; }
            60% { transform: scale(1.1); }
            100% { transform: scale(1); opacity: 1; }
        }

        /* 隐藏内容 */
        .hidden {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #ff3366;
            font-size: 24px;
            text-align: center;
        }

        /* 镜子效果 */
        #mirror {
            font-size: 40px;
            color: #ff6699;
            text-shadow: 0 0 10px rgba(255,102,153,0.5);
        }

        /* 最终祝福 */
        #birthday-message {
            font-size: 36px;
            animation: glow 2s infinite alternate;
        }

        @keyframes glow {
            from { text-shadow: 0 0 10px #ff3366; }
            to { text-shadow: 0 0 30px #ff99cc; }
        }

        /* 视频容器 */
        #video-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: black;
        }
  #birthday-video {
            max-width: 90%;        /* 限制最大宽度 */
            max-height: 90%;       /* 限制最大高度 */
            object-fit: contain;    /* 保持视频比例 */
        }
       
    </style>
</head>
<body>
    <!-- 输入界面 -->
    <div class="container" id="main">
        <h1 style="color: #ff6699;">🎀 生日验证系统 🎀</h1>
        <input type="date" id="dateInput" required>
        <input type="text" id="nameInput" placeholder="请输入今日寿星的名字" required>
        <button onclick="validate()">开始验证✨</button>
    </div>

    <!-- 验证成功提示 -->
    <div id="success" class="hidden">🎉 哦是她吗？</div>
    
    <!-- 镜子效果 -->
    <div id="mirror" class="hidden">
        <div style="position: absolute; left: 20px;">子</div>
        <div style="position: absolute; right: 20px;">镜</div>
    </div>

    <!-- 生日祝福 -->
    <div id="birthday-message" class="hidden">小张同学生日快乐！🎂</div>

    <!-- 视频播放 -->
    <div id="video-container" class="hidden">
        <video id="birthday-video" width="100%" height="100%" controls>
            <source src="001.mp4" type="video/mp4">
        </video>
    </div>.MP4

    <!-- 音效 -->
    <audio id="sound1" src="01.mp3"></audio>
    <audio id="sound2" src="02.mp3"></audio>

    <script>
        // 验证函数
        function validate() {
            const date = document.getElementById('dateInput').value;
            const name = document.getElementById('nameInput').value.trim().toLowerCase();

            // 验证逻辑（每年3月5日）
            const isValidDate = date.endsWith('-03-05');
            const isValidName = name === '张同慧';

            if(isValidDate && isValidName) {
                showSurprise();
            } else {
                // 错误动画
                document.getElementById('main').style.animation = 'shake 0.5s';
                setTimeout(() => {
                    document.getElementById('main').style.animation = '';
                }, 500);
            }
        }

        // 惊喜流程控制
        async function showSurprise() {
            const main = document.getElementById('main');
            const success = document.getElementById('success');
            const mirror = document.getElementById('mirror');
            const message = document.getElementById('birthday-message');
            const videoContainer = document.getElementById('video-container');

            // 播放第一个音效
            document.getElementById('sound1').play();
            
            // 第一步：显示成功提示
            main.style.display = 'none';
            success.style.display = 'block';
            
            // 第二步：显示镜子效果
            await sleep(2000);
            success.style.display = 'none';
            document.body.style.background = '#000';
            mirror.style.display = 'block';

            // 第三步：显示生日祝福
            await sleep(5000);
            mirror.style.display = 'none';
            message.style.display = 'block';
            document.getElementById('sound2').play();

            // 第四步：播放视频
            await sleep(2000);
            message.style.display = 'none';
            videoContainer.style.display = 'block';
            const video = document.getElementById('birthday-video');
            video.play();

            // 视频结束关闭页面
            video.onended = () => window.close();
        }

        // 工具函数
        function sleep(ms) {
            return new Promise(resolve => setTimeout(resolve, ms));
        }

        // 抖动动画
        const style = document.createElement('style');
        style.textContent = `
            @keyframes shake {
                0% { transform: translateX(0); }
                25% { transform: translateX(-10px); }
                50% { transform: translateX(10px); }
                75% { transform: translateX(-10px); }
                100% { transform: translateX(0); }
            }
        `;
        document.head.appendChild(style);
    </script>
</body>
</html>